<!--
 * @Description: 
 * @Author: wanghongjian
 * @@github: https://github.com/whj0117
 * @Date: 2025-11-06 17:16:47
 * @LastEditors: wanghongjian
 * @LastEditTime: 2025-11-13 14:42:59
-->
<template>
  <div class="dashboard-container">
    <div class="title">需要管家跟随用户列表</div>
    <div class="tags-item">
      <div class="filter-wrap">
        <div class="filter-container">
          <el-input
            v-model.trim="query.purchaseOrderNumber"
            clearable
            placeholder="用户名称"
            @keyup.enter.native="search"
          />
          <el-date-picker
            v-model="q_z_formDate"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="预约开始开始时间"
            end-placeholder="预约结束时间"
            @change="q_z_selectTime"
          />
          <el-select v-model="value" clearable placeholder="跟随管家">
            <el-option label="车" value="0"></el-option>
            <el-option label="房" value="1"></el-option>
          </el-select>
          <el-select v-model="value" clearable placeholder="临时更换跟随管家">
            <el-option label="车" value="0"></el-option>
            <el-option label="房" value="1"></el-option>
          </el-select>
          <el-button
            @click="search"
            type="primary"
            style="background-color: #ff47ab; border-color: #ff47ab"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="table-data">
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#E3E5E8',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="date" label="姓名"></el-table-column>
          <el-table-column prop="name" label="学历"></el-table-column>
          <el-table-column prop="address" label="年龄"></el-table-column>
          <el-table-column prop="address" label="性别"></el-table-column>
          <el-table-column prop="address" label="认证"></el-table-column>
          <el-table-column prop="address" label="预约时间"></el-table-column>
          <el-table-column prop="address" label="预约地点"></el-table-column>
          <el-table-column prop="address" label="跟随管家"></el-table-column>
          <el-table-column
            prop="address"
            label="临时更换跟随管家"
          ></el-table-column>
          <el-table-column
            prop="address"
            label="临时更换时间"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <i
                class="el-icon-edit-outline"
                style="color: #ff47ab; cursor: pointer"
                @click="handleEdit"
              ></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="编辑临时更换信息"
      :visible.sync="dialogVisible"
      width="850px"
      :before-close="handleClose"
    >
      <div class="dialog-content">
        <el-form ref="form" :model="form" label-width="140px">
          <el-form-item label="约见用户信息">
            <div class="info-content">
              <div class="info-item">
                <div class="item-left">
                  <img src="../../images/login.png" alt="" />
                  <div class="l-info">
                    <div class="username">昵称</div>
                    <div>聂小倩</div>
                  </div>
                </div>
                <div class="item-right">
                  <div>男</div>
                </div>
              </div>
              <div class="info-item">
                <div class="item-left">
                  <img src="../../images/login.png" alt="" />
                  <div class="l-info">
                    <div class="username">昵称</div>
                    <div>聂小倩</div>
                  </div>
                </div>
                <div class="item-right">
                  <div>男</div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="临时更换跟随管家">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="临时更换时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 200px"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false"
          style="
            border-color: #ff47ab;
            background-color: rgba(255, 71, 171, 0.1);
            color: #ff47ab;
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          style="border-color: #ff47ab; background-color: #ff47ab; color: #fff"
          @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Datalist",
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
        {
          date: "昵称",
          name: "昵称123",
          address: "上海市",
        },
      ],
      form:{},
      query: {},
      q_z_formDate: [],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handleEdit(){
      this.dialogVisible = true
    },
    handleClose() {},
    getInfo() {},
    indexMethod(index) {
      return index / 2 + 1;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const index = [0, 6, 7, 8, 9, 10,11];
      if (index.includes(columnIndex)) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 84px);
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #222222;
  }
  .tags-item {
    margin: 30px 0 20px;
    .tags-item-list {
      margin-bottom: 60px;
      &:last-child {
        margin-bottom: 0;
      }
      .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          height: 14px;
          line-height: 14px;
          padding-left: 16px;
          border-left: 4px solid #ff47ab;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 14px;
          color: #222222;
        }
        .line {
          flex: 1;
          margin: 0 20px;
          border-top: 1px dashed #999999;
        }

        .edit {
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          cursor: pointer;
        }
      }
      .list-content {
        margin-top: 30px;
        ::v-deep .tableColumnClassName {
          background-color: #f1f3f7;
        }
        &.information-authentication {
          display: flex;
          align-items: center;
          .info-item {
            margin-right: 46px;
            font-size: 14px;
            color: #777777;
            & > img {
              width: 50px;
              height: 50px;
              margin-bottom: 12px;
            }
          }
        }

        &.textarea-content {
          line-height: 20px;
          font-size: 14px;
          color: #444444;
        }

        &.interrogate-content {
          .interrogate-item {
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 14px;
            color: #444444;
            line-height: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            .interrogate-title {
              margin-bottom: 16px;
              font-size: 14px;
              color: #ff47ab;
            }
            .interrogate-text {
              padding-left: 20px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    .filter-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .filter-container {
        margin-bottom: 0;
      }
    }
  }
  .dialog-content {
    .info-content {
      width:100%;
      height: 100px;
      display: flex;
      align-items: center;
      background-color: #F7F7F7;
      border-radius: 4px 4px 4px 4px;
      .info-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 40px;
        box-sizing: border-box;
        cursor: pointer;
        &:first-child{
          position: relative;
          &::after{
            position: absolute;
            right: 0;
            width: 1px;
            height: 60px;
            background-color: #D4D4D4;
            content:''
          }
        }
        .item-left {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
          color: #222222;
          img {
            width: 60px;
            height: 60px;
            border-radius: 6px 6px 6px 6px;
          }
          .l-info {
            margin-left: 8px;
            line-height: normal;
            .username {
              margin-bottom: 15px;
              font-size: 14px;
              color: #777777;
            }
          }
        }
        .item-right {
          text-align: right;
          font-size: 14px;
          color: #222222;
        }
      }
    }
  }
}
</style>